.force-center {
    position: relative;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    text-align: center;
}

.image-container {
    position: relative;
    top: 4px;
    margin: 4px;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    background-color: var(--mud-palette-background-grey);
}

.image-pixelated {
    image-rendering: pixelated;
}

.status-bar {
    position: relative;
    width: 100%;
    height: 30px;
    background-color: var(--mud-palette-background-grey);
    top: -4px;
    padding-top: 6px;
    opacity: .7;
}

.position-text {
    min-width: 100px;
}

.draw-cursor {
    cursor: crosshair;
}

.default-cursor {
    cursor: default;
}

.corners {
    position: relative;
    background:
        linear-gradient(to right, var(--mud-palette-primary) 4px, transparent 4px) 0 0,
        linear-gradient(to right, var(--mud-palette-primary) 4px, transparent 4px) 0 100%,
        linear-gradient(to left, var(--mud-palette-primary) 4px, transparent 4px) 100% 0,
        linear-gradient(to left, var(--mud-palette-primary) 4px, transparent 4px) 100% 100%,
        linear-gradient(to bottom, var(--mud-palette-primary) 4px, transparent 4px) 0 0,
        linear-gradient(to bottom, var(--mud-palette-primary) 4px, transparent 4px) 100% 0,
        linear-gradient(to top, var(--mud-palette-primary) 4px, transparent 4px) 0 100%,
        linear-gradient(to top, var(--mud-palette-primary) 4px, transparent 4px) 100% 100%;

    background-repeat: no-repeat;
    background-size: 40px 40px;
    z-index: 1;
}

.crosshair-line {
    stroke: #af4ae2;
}
